<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        /* 手风琴  */
       a{
           display: block;
           width: 100%;
           height: 50px;
           background: #000;
           color: #fff;
           line-height: 50px;
           text-align: center;
           font-size: 30px;
           text-decoration: none
       }
       /* 目标选择器 - 改变哪个元素就给哪个元素添加 */
       /* 在锚点未点击前是没有效果的，只有点击后目标选择器才会生效 */
       #box1:target{
           /* font-size: 50px */
           width: 100%;
           height: 300px;
           background: red
       }
       #box2:target{
           /* font-size: 50px */width: 100%;
           height: 300px;
           background: green
       }
       #box3:target{
           /* font-size: 50px */width: 100%;
           height: 300px;
           background: blue
       }
       .wrap div{
           height: 0;
           /* 过渡 谁改变给谁加 - 从一种状态变换到另外一种状态时候的过渡过程 */
           transition: 1s;
       }
    </style>
</head>

<body>
    <div class="wrap">
        <a href="#box1">开关1</a>
        <div id="box1">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <a href="#box2">开关2</a>
        <div id="box2"></div>
        <a href="#box3">开关3</a>
        <div id="box3"></div>
    </div>
</body>

</html>